<style scoped lang="scss">
  .container-box {
    display: flex;
    flex-wrap: wrap;
    .goods-item {
      width: 50%;
      box-sizing: border-box;
      margin-bottom: 10px;
      padding-right: 5px;
      &:nth-child(2n) {
        padding-right: 0px;
        padding-left: 5px;
      }
      .item-link{
        position: relative;
        height: 120px;
        display: inline-block;
        overflow: hidden;
        border-radius: 2px;

        background-color: #e5e5e5;
        width: 100%;
        display: inline-block;

        &:before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          // background: rgba(0, 0, 0, 0.5);
          background: -webkit-linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.3));
          background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.3));
        }
        /*img {*/
        /*width: 100%;*/
        /*min-height: 120px;*/
        /*}*/
        .cate {
          position: absolute;
          top: 0;
          left: 0;
          padding-right: 20px;
          .b {
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            padding-left: 6px;
            background: #fc5446;
            color: #fff;
            display: block;
            border-top-left-radius: 0.10667rem;
          }
          .i {
            position: absolute;
            display: inline-block;
            width: 0;
            height: 0;
            right: 0px;
            top: 0;
            border-top: 20px solid #fc5446;
            border-right: 20px solid transparent;
            z-index: 1;
          }
        }
        .title{
          width: calc(100% - 28px);
          height: 30px;
          line-height: 30px;
          padding: 7px 14px;
          position: absolute;
          bottom: 0;
          left: 0;
          color: #fff;
          overflow: hidden;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
</style>
<template>
  <view class="coutner-big" v-if="lists.length>0">
    <view class="container hot">
      <li v-if="title" class="container-title">
        <view style="height: 100%;">
          <view class="title-text">
            <i class="line line-left" />
            <span style="clear: both; display: inline-block; padding: 0 10px;">{{ title }}</span>
            <i class="line line-right" />
          </view>
        </view>
      </li>
      <!-- <viewclass="hr"></div> -->
      <!--<lazy-component @show="handler(title)">-->
      <ul class="container-box p-10">
        <li class="container-item goods-item" v-for="(item,idx) in lists" :key="idx">
          <view class="item-link fullbg" @click="toPage(item)" :style="{backgroundImage:'url('+item.logo+')'}">
            <!--<img class="thumb" v-lazy="item.goods_logo" >-->
            <view class="cate" v-if="show_cate_title">
              <text class="b">{{item.cate_title}}</text>
              <text class="i"></text>
            </view>
            <view class="title fz-14">{{item.title}}</view>
          </view>
        </li>
      </ul>
      <!--</lazy-component>-->
      <navigator v-if="more" :url="more" class="container-more">
        <view class="title-text">
          <i class="line line-left" />
          <view style="clear: both; display: inline-block; padding: 0 10px;">加载更多</view>
          <i class="line line-right" />
        </view>
      </navigator>
    </view>
  </view>
</template>

<script>
import { goods } from '@/api'
import { Exception } from '@/common/Exception'
import { linkToEasy } from '@/common/fun'

export default {
  name: 'goods-counter-big',
  props: {
    type: { type: String },
    title: { type: String },
    show_cate_title: { type: Boolean, value: false },
    cate_id: { type: String }, // 获取指定id
    scene_id: { type: String }, // 获取目的地关联商品
    order: { type: String, value: 'sort desc,id desc' }, // 排序规则
    size: { type: Number, value: 10 }, // 数量，默认十个
    more: { type: String, value: null } // 如果该值为字符串，则显示更多按钮。
  },
  data () {
    return {
      lists: [] // 结果
    }
  },
  methods: {
    toPage (info) {
      var id = info.id
      console.log(info)
      var type = this.type
      var url = null
      if (!type && info && info.hasOwnProperty('type')) {
        type = info.type
      }
      switch (type) {
        case 'hotel':
          url = '/pages/hotel/detail?id=' + id
          break
        case 'ticket':
          break
        case 'goods':
          url = '/pages/goods/goods?id=' + id
          break
        default:
          break
      }
      console.log(url)
      if (url) {
        linkToEasy(url)
      }

    },
    load () {
      var params = {
        cate_id: this.cate_id,
        scene_id: this.scene_id,
        order: this.order,
        size: this.size,
        type: this.type
      }
      goods(params).then(res => {
        this.lists = this.lists.concat(res.data)
      }).catch(err => Exception.handle(err))
    }
  },
  created () {
    this.load()
  }
}
</script>
